<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
 /*q旋转*/
div
{
font-size:14px;
text-align: center;
margin: 100px auto;
width:200px;
height:100px;
line-height: 100px;
background-color:yellow;
/* Rotate div */
transform:rotate(12deg);
-ms-transform:rotate(12deg); /* Internet Explorer */
-moz-transform:rotate(12deg); /* Firefox */
-webkit-transform:rotate(12deg); /* Safari 和 Chrome */
-o-transform:rotate(12deg); /* Opera */
}
/*移动*/
div#div1
{
transform: translate(-100px,10px);
-ms-transform:translate(-100px,10px); /* IE 9 */
-moz-transform:translate(-100px,10px); /* Firefox */
-webkit-transform:translate(-100px,10px); /* Safari and Chrome */
-o-transform:translate(-100px,10px); /* Opera */
}
/*比例缩放*/
div#div2
{
margin-left: 800px;
transform:scale(2,3);
-ms-transform:scale(2,3); /* IE 9 */
-moz-transform:scale(2,3); /* Firefox */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-o-transform:scale(2,3); /* Opera */
}
/*xy轴旋转*/
div#div3
{
	transform: skew(25deg,15deg);/*(x,y)*/
	-ms-transform: skew(25deg,15deg);/*IE9*/
	-moz-transform: skew(25deg,15deg);/* Firefox */
	-webkit-transform: skew(25deg,15deg); /* Safari and Chrome */
	-o-transform: skew(25deg,15deg);/* Opera */
}
/*matrix() 方法把所有 2D 转换方法组合在一起*/
div#div4
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

</style>
</head>
<body>

<div>歪下头看的更清楚有木有？</div>
<div id="div1">快看，我移动到这儿了！</div>
<div id="div2">别惊讶！I am a bug!!!</div>
<div id="div3">来来来，摆个pose！！</div>
<div id="div4">BOSS全能matrix来了！！</div>

</body>
</html>